<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 重置默认样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        cursor: default;
        user-select: none;
      }

      /* 页面居中布局 */
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f5f5f5;
        font-family: Arial, Helvetica, sans-serif;
      }

      /* 容器居中对齐 */
      .container {
        text-align: center;
      }

      /* 时钟容器 */
      .clockContainer {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 0 auto 30px;
      }

      /* 时钟表面样式 */
      .clockFace {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: white;
        border: 10px solid #e0e0e0;
        box-shadow: 0 0 10px 10px #3333337a;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /* 中心点样式 */
      .centerPoint {
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #333;
        border-radius: 50%;
        z-index: 10;
      }

      /* 指针公共样式 */
      .hourHand,
      .minuteHand,
      .secondHand {
        position: absolute;
        transform-origin: bottom center; /* 设置旋转原点在底部中心 */
        bottom: 50%; /* 定位到时钟中心 */
        left: 50%;
      }

      /* 时针样式 */
      .hourHand {
        width: 6px;
        height: 80px;
        background-color: #d10000;
        border-radius: 4px;
        z-index: 3;
      }

      /* 分针样式 */
      .minuteHand {
        width: 4px;
        height: 110px;
        background-color: #333;
        border-radius: 4px;
        z-index: 2;
      }

      /* 秒针样式 */
      .secondHand {
        width: 2px;
        height: 120px;
        background-color: #999;
        z-index: 1;
      }

      /* 小时刻度数字样式 */
      .hourNumber {
        position: absolute;
        color: #333;
        font-size: 16px;
        font-weight: 300;
        transform-origin: center;
      }

      /* 分钟刻度线样式 */
      .hourMarker {
        position: absolute;
        background-color: #e0e0e0;
        width: 2px;
        height: 8px;
        transform-origin: bottom center;
        bottom: 50%;
        left: 50%;
        transform: translateX(-50%);
      }

      /* 数字时间显示样式 */
      .digitalTime {
        color: #333;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: 2px;
      }
    </style>

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>
  <body>
    <div class="container">
      <div class="clockContainer">
        <div class="clockFace">
          <div class="centerPoint"></div>
          <div class="hourHand"></div>
          <div class="minuteHand"></div>
          <div class="secondHand"></div>
        </div>
      </div>
      <div class="digitalTime"></div>
    </div>
  </body>
  <script>
    // DOM内容加载完成后执行
    document.addEventListener('DOMContentLoaded', () => {
      // 获取时钟相关DOM元素
      const clockFace = document.querySelector('.clockFace')
      const hourHand = document.querySelector('.hourHand')
      const minuteHand = document.querySelector('.minuteHand')
      const secondHand = document.querySelector('.secondHand')
      const digitalTime = document.querySelector('.digitalTime')

      // 创建12个小时的数字刻度（1-12）
      for (let i = 1; i <= 12; i++) {
        // 创建小时数字元素
        const hourNumber = document.createElement('div')
        hourNumber.className = 'hourNumber'
        hourNumber.textContent = i

        // 计算数字在圆周上的位置
        // 每个小时的角度为30度（360/12），转换为弧度
        const angle = i * 30 * (Math.PI / 180)
        // 半径为120像素
        const radius = 120
        // 使用三角函数计算x,y坐标
        const x = Math.sin(angle) * radius
        const y = -Math.cos(angle) * radius

        // 根据数字大小调整位置（避免数字重叠）
        if (i <= 9) {
          hourNumber.style.left = `calc(49% + ${x}px)`
          hourNumber.style.top = `calc(47.5% + ${y}px)`
        } else {
          hourNumber.style.left = `calc(46.5% + ${x}px)`
          hourNumber.style.top = `calc(47.5% + ${y}px)`
        }
        // 将小时数字添加到时钟表面
        clockFace.appendChild(hourNumber)
      }

      // 创建分钟刻度线（除了小时位置）
      for (let i = 0; i < 60; i++) {
        // 每5分钟有一个小时数字，跳过这些位置
        if (i % 5 != 0) {
          // 创建刻度线元素
          const marker = document.createElement('div')
          marker.className = 'hourMarker'

          // 计算刻度线角度和位置
          // 每分钟6度（360/60），转换为弧度
          const angle = i * 6 * (Math.PI / 180)
          const radius = 130
          const x = Math.sin(angle) * radius
          const y = -Math.cos(angle) * radius

          // 设置刻度线位置和旋转角度
          marker.style.left = `calc(50% + ${x}px)`
          marker.style.top = `calc(47.5% + ${y}px)`
          // 旋转刻度线使其垂直于圆周
          marker.style.transform = `translateX(-50%) rotate(${i * 6}deg)`

          // 将刻度线添加到时钟表面
          clockFace.appendChild(marker)
        }
      }

      // 更新时钟显示函数
      function updateClock() {
        // 获取当前时间
        const now = new Date()
        // 判断上午还是下午
        const day = now.getHours() >= 12 ? 'PM' : 'AM'
        // 获取小时（12小时制）
        const hours = now.getHours() % 12 || 12
        // 获取分钟和秒数
        const minutes = now.getMinutes()
        const seconds = now.getSeconds()
        // 获取毫秒用于平滑秒针移动
        const milliseconds = now.getMilliseconds()

        // 计算各指针的旋转角度
        // 时针：每小时30度 + 每分钟0.5度的偏移
        const hourDeg = hours * 30 + minutes * 0.5
        // 分针：每分钟6度 + 每秒0.1度的偏移
        const minuteDeg = minutes * 6 + seconds * 0.1
        // 秒针：每秒6度 + 每毫秒0.006度的偏移
        const secondDeg = seconds * 6 + milliseconds * 0.006

        // 应用旋转角度到各指针
        hourHand.style.transform = `translate(-50%) rotate(${hourDeg}deg)`
        minuteHand.style.transform = `translate(-50%) rotate(${minuteDeg}deg)`
        secondHand.style.transform = `translate(-50%) rotate(${secondDeg}deg)`

        // 格式化数字时间显示（补零）
        const formattedHours = String(hours).padStart(2, '0')
        const formattedMinutes = String(minutes).padStart(2, '0')
        const formattedSecons = String(seconds).padStart(2, '0')

        // 更新数字时间显示
        digitalTime.textContent = `${day} ${formattedHours}:${formattedMinutes}:${formattedSecons}`
      }

      // 初始化时钟显示
      updateClock()
      // 每50毫秒更新一次时钟（约每秒20帧）
      setInterval(updateClock, 50)
    })
  </script>
</html>
